<script setup lang="ts" name="my-table-col">
import { isVNode,computed} from 'vue'
// 表头配置的属性同el-table-columns属性。额外为多级表头提供属性childrenCols，为表头配置提供自定义渲染函数
const props=defineProps<{
	item: {
		label: string
		prop: string
		childrenCols?: any[]
		contentRender?: (scope: { [key: string]: any }) => any
		headerRender?: (scope: { [key: string]: any }) => any
		[key: string]: any
	}
}>()
const hasChildrenColProp=computed(()=>{
	const item=JSON.parse(JSON.stringify(props.item))
	delete item.childrenCols
	return item
})
</script>

<template>
	<!--body { row, column, $index } -->
	<!--header { column, $index } -->
	<el-table-column v-bind="item" v-if="!(item.childrenCols && item.childrenCols.length)">
		<template #header="scope:any">
			<!-- 填补列头部插槽时，使用prop-header的具名形式填充 -->
			<!-- <slot :name="`${item.prop}-header`" v-bind="scope">{{ item.label }}</slot> -->
			<slot :name="`${item.prop}-header`" v-bind="scope">
				<component v-if="item.headerRender && isVNode(item.headerRender(scope))" :is="item.headerRender(scope)" />
				<template v-else>{{ item.headerRender ? item.headerRender(scope) : item.label }}</template>
			</slot>
		</template>

		<template #default="scope: any">
			<!-- 填补列内容插槽时，使用prop的具名形式填充 -->
			<slot :name="item.prop" v-bind="scope">
				<component v-if="item.contentRender && isVNode(item.contentRender(scope))" :is="item.contentRender(scope)" />
				<template v-else>{{ item.contentRender ? item.contentRender(scope) : scope.row[item.prop] }}</template>
			</slot>
		</template>
	</el-table-column>

	<el-table-column :key="item.prop" v-bind="hasChildrenColProp" v-else>
		<template #header="scope:any">
			<!-- <slot :name="`${item.prop}-header`" v-bind="scope">{{ item.label }}</slot> -->
			<slot :name="`${item.prop}-header`" v-bind="scope">
				<component v-if="item.headerRender && isVNode(item.headerRender(scope))" :is="item.headerRender(scope)" />
				<template v-else>{{ item.headerRender ? item.headerRender(scope) : item.label }}</template>
			</slot>
		</template>

		<my-table-col v-for="itemc in item.childrenCols" :key="itemc.prop" :item="itemc" />
	</el-table-column>
</template>
